<div class="modal-shadow" (click)="hideSelect($event)">
    <div class="self-info-container modal-content clearfix">
        <span class="modal-close" (click)="selfClose($event)"></span>
        <span class="self-info-more" (click)="showMenu($event)"></span>
        <info-menu-component [hidden]="!infoMenu.show" [menu]="infoMenu" (selectMenuItem)="selectMenuItemEmit($event)"></info-menu-component>
        <div class="self-info-avatar">
            <div [hidden]="isEdit" class="self-info-show-avatar">
                <img [src]="selfInfo.info.avatarUrl" avatarLoad [avatarError]="3" alt="">
            </div>
            <div [hidden]="!isEdit">
                <label for="selfAvatarInput" [ngClass]="{'camera-shadow': cameraShadow}">
                    <img #selfAvatarImg avatarLoad [avatarError]="3" [src]="selfInfo.info.avatarUrl" alt="">
                </label>
            </div>
            <input spellcheck="false" (change)="selfAvatarChange()" type="file" id="selfAvatarInput" #selfAvatarInput style="display:none;">
            <p class="self-info-avatar-username" [title]="selfInfo.info.nickname ? selfInfo.info.nickname : selfInfo.info.username">{{selfInfo.info.nickname ? selfInfo.info.nickname : selfInfo.info.username}}</p>
            <div class="self-info-signature">
                <input spellcheck="false" maxlength="30" [ngModel]="selfInfo.info.signature" (change)="signatureChange($event)" class="self-info-input input-focus" [hidden]="!isEdit" spellcheck="false" type="text" placeholder="输入个性签名">
                <p [hidden]="isEdit" [title]="selfInfo.info.signature ? selfInfo.info.signature : '暂无签名'">{{selfInfo.info.signature ? (selfInfo.info.signature | ellipsis: 32) : '暂无签名'}}</p>
            </div>
        </div>
        <p class="self-info-p display-flex">
            <span class="self-info-fixed-width">用户名：</span>
            <span class="flex-1" [ngClass]="{'gray': isEdit}">{{selfInfo.info.username}}</span>
        </p>
        <p class="self-info-p display-flex">
            <span class="self-info-fixed-width">昵&ensp;&ensp;称：</span>
            <span [hidden]="isEdit" class="flex-1">{{selfInfo.info.nickname ? selfInfo.info.nickname : '无'}}</span>
            <input spellcheck="false" class="self-info-input input-focus" (change)="nicknameChange($event)" [hidden]="!isEdit" type="text" spellcheck="false" [ngModel]="selfInfo.info.nickname">
        </p>
        <p class="self-info-p display-flex">
            <span class="self-info-fixed-width">性&ensp;&ensp;别：</span>
            <span [hidden]="isEdit" class="flex-1">{{selfInfo.info.gender === 0 ? '保密' : (selfInfo.info.gender === 1 ? '男' : '女')}}</span>
            <select-component *ngIf="isEdit" [selectList]="sexList"></select-component>            
        </p>
        <p class="self-info-p display-flex">
            <span class="self-info-fixed-width">地&ensp;&ensp;区：</span>
            <span [hidden]="isEdit" class="flex-1">{{selfInfo.info.region ? selfInfo.info.region : '无'}}</span>
            <input spellcheck="false" class="self-info-input input-focus" (change)="regionChange($event)" [hidden]="!isEdit" type="text" spellcheck="false" [ngModel]="selfInfo.info.region">
        </p>
        <p class="modal-btn clearfix">
            <button [hidden]="isEdit" type="button" class="self-info-edit-btn btn-white" (click)="toEdit()">编辑</button>
            <button [hidden]="!isEdit" type="button" class="btn-cancel btn-white float-left" (click)="selfCancel()">取消</button>            
            <button [hidden]="!isEdit" type="button" [ngClass]="{'loading': selfInfo.loading}" class="btn-confirm btn-active float-right" (click)="selfConfirm()">保存</button>
        </p>
    </div>
</div>
<group-avatar-component *ngIf="avatarConfig.show" [groupAvatarInfo]="avatarConfig" (groupAvatar)="avatarConfirmEmit($event)"></group-avatar-component>